<template>
  <div>
    <!-- 使用重构后的组件结构 -->
    <div>
      <chapter-management v-if="false" v-model="dirList" @updateFileList="handleUpdateFileList" />
      <digital-human-video v-if="false" :course-id="postForm.id" ref="digitalHumanVideo" />

      <!-- 使用主组件 -->
      <ComponentIndex v-model="dirList" :isDigitalHuman="isDigitalHuman" @updateFileList="handleUpdateFileList" />
    </div>
  </div>
</template>

<script>
import { uuid } from "vue-uuid";
import { mapGetters } from "vuex";
import ComponentIndex from "./components/index.vue";
import ChapterManagement from "./components/ChapterManagement.vue";
import DigitalHumanVideo from "./components/DigitalHumanVideo.vue";

export default {
  name: "DirList",
  pageState: "dirList",
  components: {
    ComponentIndex,
    ChapterManagement,
    DigitalHumanVideo,
  },
  props: {
    value: {
      type: Array,
      default: () => [],
    },
    isDigitalHuman: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      dirList: [],
      excludes: [],
      postForm: {
        id: null,
        name: ""
      },
      tempId: `temp_${uuid.v4()}`
    };
  },
  computed: {
    ...mapGetters(["zlBaseUrl", "userId", "deptCode"]),
  },
  watch: {
    value: {
      handler(val) {
        this.dirList = val;
        this.$emit("updateFileList", val);
      },
      deep: true,
    },

    // 检测查询变化
    dirList: {
      handler(val) {
        this.$emit("input", val);
        console.log("val");
        this.processExcludes();
      },
      deep: true,
    },
  },
  created() {
    this.dirList = this.value;
  },
  mounted() {
    this.getCourseIdFromUrl();
  },
  methods: {
    // 获取URL中的课程ID
    getCourseIdFromUrl() {
      const url = window.location.href;
      const match = url.match(/\/update\/(\d+)/);
      if (match && match[1]) {
        this.postForm.id = match[1];
        console.log("从URL中获取课程ID：", this.postForm.id);
      }
    },

    // 处理文件列表更新
    handleUpdateFileList(val) {
      this.$emit("updateFileList", val);
    },

    // 处理已在列表的文件，避免重复加入
    processExcludes() {
      const ids = [];
      for (let i = 0; i < this.dirList.length; i++) {
        const files = this.dirList[i].fileList;
        for (let j = 0; j < files.length; j++) {
          ids.push(files[j].fileId);
        }
      }
      this.excludes = ids;
    },
  },
};
</script>
<style scoped lang="scss">
/deep/.el-button--success {
  background-color: #6f5af6 !important;
  border-color: #6f5af6 !important;
  position: relative;
}

/deep/.el-button--success:active {
  background-color: #501fe3 !important;
  border-color: #501fe3 !important;
}
</style>
